<template>
    <div class="app-container h-auto min-h-full">
        <h1 class="text-xl font-bold">modal组件使用示例</h1>

        <ul class="flex flex-col gap-5">
            <li>
                <vxe-tip status="primary">
                    基础窗口 默认自适应高度，最大高度为100%
                </vxe-tip>
                <vxe-button content="点击弹出" @click="$refs.dialogRef.open()"></vxe-button>
                <y-dialog title="基础窗口" ref="dialogRef">
                    <div style="height:1600px;background: beige">内容区高度1600px</div>
                </y-dialog>
            </li>
            <li>
                <vxe-tip status="primary">
                    基础窗口 手动传入宽高
                </vxe-tip>
                <vxe-button content="点击弹出" @click="$refs.dialog3Ref.open()"></vxe-button>
                <y-dialog title="基础窗口" width="1200" height="500" ref="dialog3Ref">
                    <div style="height:160px;background: beige">内容区</div>
                </y-dialog>
            </li>
            <li>
                <vxe-tip status="primary">
                    全屏窗口 fullscreen
                </vxe-tip>
                <vxe-button content="点击弹出" @click="$refs.dialog2Ref.open()"></vxe-button>
                <y-dialog title="全屏窗口" fullscreen ref="dialog2Ref">
                    <div style="height:1600px;background: beige">内容区</div>
                </y-dialog>
            </li>
            <li>
                <vxe-tip status="primary">
                    内外数据交互
                </vxe-tip>
                <vxe-button content="打开弹窗并传递数据" @click="handelDialogForm"></vxe-button>

                <y-form-dialog title="表单弹窗" ref="dialogFormRef" :formOptions="formOptions"
                    @confirm="confirm"></y-form-dialog>
            </li>
        </ul>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            formOptions: {
                items: [
                    {
                        field: 'shen',
                        title: '省',
                        itemRender: {
                            name: 'ElSelect',
                            options: [
                                { label: '四川省', value: '510000' },
                                { label: '青海省', value: '630000' }
                            ],
                        }
                    },
                    {
                        field: 'shi',
                        title: '市',
                        itemRender: {
                            name: 'ElSelect',
                            options: [
                                { label: '锦江区', value: '510104' },
                                { label: '青羊区', value: '510105' },
                                { label: '旌阳区', value: '510603' },
                                { label: '中江县', value: '510623' },
                                { label: '城东区', value: '630102' },
                                { label: '城中区', value: '630103' },
                                { label: '德令哈市', value: '632802' },
                                { label: '格尔木市', value: '632801' },
                            ]
                        }
                    },
                    {
                        field: 'qu',
                        title: '区',
                        required: true,
                        itemRender: {
                            name: 'ElSelect',
                            options: [
                                { label: '锦江区', value: '510104' },
                                { label: '青羊区', value: '510105' },
                                { label: '旌阳区', value: '510603' },
                                { label: '中江县', value: '510623' },
                                { label: '城东区', value: '630102' },
                                { label: '城中区', value: '630103' },
                                { label: '德令哈市', value: '632802' },
                                { label: '格尔木市', value: '632801' },
                            ]
                        }
                    }
                ]
            }
        }
    },
    methods: {
        handelDialogForm() {
            // 打开弹窗
            this.$refs.dialogFormRef.open({ id: '12', "shen": "510000" });
        },
        async confirm(form) {
            console.log(form)
            // return await request({
            //     url: '/edit',
            //     methods: 'get'
            // })
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(true)
                }, 1000)
            })
        }
    }
}
</script>